<template>
  <div v-if="playlistMsg"  v-loading="Loading">
    <div class="listTitle">
      <div class="leftImg">
        <img
          v-if="playlistMsg.coverImgUrl"
          :src="playlistMsg.coverImgUrl"
          alt=""
        />
      </div>
      <div class="RightText">
        <div class="textTop">
          <span class="gedan">歌单</span>
          <span class="textTopTitle">{{ playlistMsg.name }}</span>
        </div>
        <div class="author">
          <img :src="playlistMsg.creator.avatarUrl" alt="" />
          <a href="jascript:void(0)" class="msg">{{
            playlistMsg.creator.nickname
          }}</a>
          <p class="createTime">{{ createTime + "创建" }}</p>
        </div>
        <div class="actionList">
          <div class="play" @click="play()">
            <svg
              t="1687787726245"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2283"
              width="16"
              height="16"
            >
              <path
                d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z"
                fill="#ffffff"
                p-id="2284"
              ></path>
            </svg>
            <p>播放全部</p>
            <svg
              t="1687788062065"
              class="icon svgtwo"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3411"
              width="16"
              height="16"
            >
              <path
                d="M863.328262 481.340895l-317.344013 0.099772L545.984249 162.816826c0-17.664722-14.336138-32.00086-32.00086-32.00086s-31.99914 14.336138-31.99914 32.00086l0 318.400215-322.368714-0.17718c-0.032684 0-0.063647 0-0.096331 0-17.632039 0-31.935493 14.239806-32.00086 31.904529-0.096331 17.664722 14.208843 32.031824 31.871845 32.095471l322.59234 0.17718 0 319.167424c0 17.695686 14.336138 32.00086 31.99914 32.00086s32.00086-14.303454 32.00086-32.00086L545.982529 545.440667l317.087703-0.099772c0.063647 0 0.096331 0 0.127295 0 17.632039 0 31.935493-14.239806 32.00086-31.904529S880.960301 481.404542 863.328262 481.340895z"
                fill="#ffffff"
                p-id="3412"
              ></path>
            </svg>
          </div>
        </div>

        <div class="tagList">
          <p v-if="playlistMsg.creator.expertTags != null">
            标签：<a
              href="jascript:void(0)"
              class="tags"
              v-for="(item, index) in playlistMsg.creator.expertTags"
              :key="index"
            >
              {{ item }}
              <a v-if="index != playlistMsg.creator.expertTags.length - 1">
                /
              </a>
            </a>
          </p>
        </div>

        <div class="CountList">
          <span
            >歌曲 : <span> {{ playlistMsg.trackCount }} </span> </span
          >&nbsp;
          <span
            >播放 : <span> {{ changeCount(playlistMsg.playCount) }} </span>
          </span>
        </div>
        <div class="descriptionBox">
          <div class="description" :class="{ active: isActive }">
            简介 :
            <span v-if="playlistMsg.description != null">{{
              playlistMsg.description
            }}</span>
            <span v-else style="color: gray">该用户有点懒</span>
          </div>
          <svg
            @click="isActive = !isActive"
            v-if="isActive"
            t="1687826669975"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2880"
            width="14"
            height="14"
          >
            <path d="M325.456471 862.280661" fill="#707070" p-id="2881"></path>
            <path d="M882.057788 862.280661" fill="#707070" p-id="2882"></path>
            <path d="M236.028491 877.160382" fill="#707070" p-id="2883"></path>
            <path d="M960.132455 877.160382" fill="#707070" p-id="2884"></path>
            <path d="M63.683483 788.736998" fill="#707070" p-id="2885"></path>
            <path d="M958.469023 788.736998" fill="#707070" p-id="2886"></path>
            <path d="M64.77753 858.792098" fill="#707070" p-id="2887"></path>
            <path
              d="M163.396533 289.168875c-40.577772 0-66.525252 54.184545-35.441258 85.258218L477.217578 723.704878c20.031716 20.031716 49.823841 20.031716 69.853837 0l349.274345-349.277785c30.304744-30.294423 6.677812-85.258218-34.928639-85.258218L163.396533 289.168875 163.396533 289.168875z"
              fill="#707070"
              p-id="2888"
            ></path>
            <path d="M959.523505 858.792098" fill="#707070" p-id="2889"></path>
          </svg>
          <svg
            @click="isActive = !isActive"
            v-else
            t="1687826720661"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3282"
            width="14"
            height="14"
          >
            <path d="M325.456471 862.280661" fill="#515151" p-id="3283"></path>
            <path d="M882.057788 862.280661" fill="#515151" p-id="3284"></path>
            <path d="M236.028491 877.160382" fill="#515151" p-id="3285"></path>
            <path d="M960.132455 877.160382" fill="#515151" p-id="3286"></path>
            <path d="M63.683483 788.736998" fill="#515151" p-id="3287"></path>
            <path d="M958.469023 788.736998" fill="#515151" p-id="3288"></path>
            <path d="M64.77753 858.792098" fill="#515151" p-id="3289"></path>
            <path
              d="M861.417121 738.727375c41.604731 0 65.233383-54.963795 34.928639-85.258218L547.071415 304.191372c-20.029996-20.031716-49.822121-20.031716-69.853837 0L127.955275 653.469157c-31.085714 31.073673-5.136514 85.258218 35.441258 85.258218L861.417121 738.727375 861.417121 738.727375z"
              fill="#515151"
              p-id="3290"
            ></path>
            <path d="M959.523505 858.792098" fill="#515151" p-id="3291"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
  <div v-else>数据正在加载中........</div>
</template>

<script>
import { GetUserplaylist, Getplaylist, Getplaylistssss } from "@/api/Playlist";
import { Loading } from "element-ui";

export default {
  data() {
    return {
      playlistMsg: null,
      isActive: true,
      Loading:true,
    };
  },
  computed: {
    createTime() {
      let date = new Date(this.playlistMsg.createTime);
      let Y = date.getFullYear();
      let M = date.getMonth() + 1;
      M = M < 10 ? "0" + M : M;
      var D = date.getDate();
      D = D < 10 ? "0" + D : D;

      return `${Y}-${M}-${D}`;
    },
  },
  methods: {
    play() {
      const musicIdList = this.playlistMsg.trackIds.map((item) => {
        return Number(item.id);
      });
      // 放入请求参数中
      Getplaylistssss(musicIdList.join(",")).then((res) => {
        let songs = res.data.songs;
        Promise.resolve(
          this.$store.commit("PlaylistDetails/setPlayList", songs)
        ).then((res) => {
          this.$store.commit("PlaylistDetails/setPlayListIndex", 1);
          this.$store.commit("PlaylistDetails/setPlayListIndex", 0);
        });
      });
    },
    changeCount(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + "亿";
      } else if (num > 10000) {
        return (num / 10000).toFixed(1) + "万";
      } else {
        return num;
      }
    },
  },
  watch: {
    $route() {
        Getplaylist(this.$route.query.id).then((res) => {
            this.playlistMsg = res.data.playlist;
        });
    },
  },
  created() {
    Getplaylist(this.$route.query.id).then((res) => {
      this.playlistMsg = res.data.playlist;
      this.Loading=false;
    });
  },
};
</script>

<style lang="less" scoped>
.listTitle {
  display: flex;
  padding: 30px;

  .leftImg {
    width: 200px;
    height: 200px;

    img {
      width: 200px;
      height: 200px;
      border-radius: 5px;
    }
  }

  .RightText {
    padding-left: 20px;

    .textTop {
      .gedan {
        display: inline-block;
        width: 40px;
        height: 20px;
        border: 1px solid #ff7a9e;
        text-align: center;
        line-height: 20px;
        color: #ff7a9e;
        border-radius: 5px;
        margin-right: 10px;
      }

      .textTopTitle {
        font-size: 20px;
        font-weight: bold;
      }
    }

    .author {
      padding: 10px 0;
      display: flex;
      align-items: center;

      img {
        width: 30px;
        height: 30px;
        border-radius: 50px;
      }

      .msg {
        margin-left: 5px;
        text-decoration: none;
        font-size: 12px;
        color: rgb(86, 166, 197);

        &:hover {
          color: rgb(41, 141, 180);
        }
      }

      .createTime {
        margin-left: 8px;
        font-size: 12px;
        color: gray;
      }
    }

    .actionList {
      .play {
        box-sizing: border-box;
        width: 150px;
        height: 35px;
        background-color: #ff7a9e;
        display: flex;
        align-items: center;
        padding: 0 0 0 20px;
        border-radius: 50px;
        color: white;

        p {
          height: 100%;
          line-height: 35px;
          border-right: 1px solid rgba(255, 255, 255, 0.226);
          padding-right: 10px;
          padding-left: 5px;
        }

        .svgtwo {
          margin-left: 5px;
        }
      }
    }

    .tagList {
      font-size: 12px;
      padding: 10px 0;

      .tags {
        color: rgb(86, 166, 197);
        text-decoration: none;

        &:hover {
          color: rgb(41, 141, 180);
        }
      }
    }

    .CountList {
      font-size: 12px;
      padding: 0 0 10px 0;

      span {
        span {
          color: gray;
        }
      }
    }

    .descriptionBox {
      width: 1030px;
      display: flex;
      justify-content: space-between;

      .description {
        width: 1000px;
        font-size: 12px;
        padding: 0 0 10px 0;
      }

      .active {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>
